<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSX表达式小结</title>
</head>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<!-- 引入 babel  将jsx语法 转换为 js语法 -->
<script src="./js/babel.min.js"></script>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">

    let obj = {
        uname:"张三",
        age:18
    }

    let str = "我要好好学习react";

    let num = "3.1415926";

    let arr = [
        {uname:"李四",age:18}
    ]



    let vdom = <div>

            {/* 这是注释 */}
            {/* 表达式中的内容： 字面量数据   number   string   boolean  null  undefined   object   Symbol   */}
            <h1>{23523534}</h1>
            <h1> { "这是字符串" }</h1>
            <h1>{ false }</h1>
            <h1>{ null }</h1>
            <h1>{ undefined}</h1>
            <h1>{ Symbol() }</h1>

            <h1>{  obj.uname }</h1>

            <h1>{ ["a","b","c","d"]  }</h1>
        
            <h1> { React.createElement("span",null,"学习jsx表达式")  }  </h1>
        
            <h1><span>学习jsx表达式</span></h1>

            <h1>   {  Math.PI  }</h1>

            <h1>  { str.slice(0,3)  }   </h1>

            <h1> { Math.ceil(num)  }  </h1>

            <h1>{  arr[0].uname }</h1>
        </div>

     //渲染
     ReactDOM.render(vdom,document.getElementById("root"));   



</script>
</html>